<template>
  <div id="classifManage">
    <el-row>
      <el-col :span="24"
        ><div class="grid-content bg-purple-dark">
          <div class="ipt">
            <el-form
              :inline="true"
              :model="formInline"
              class="demo-form-inline"
              size="small"
            >
              <el-form-item label="状态">
                <el-select v-model="formInline.region">
                  <el-option label="全部" value="-1"></el-option>
                  <el-option label="显示" value="0"></el-option>
                  <el-option label="不显示" value="1"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="名称">
                <el-input v-model="formInline.user" placeholder="请输入名称">
                  <el-button
                    slot="append"
                    icon="el-icon-search"
                    @click="getSeacrh"
                  ></el-button>
                </el-input>
              </el-form-item>
            </el-form>
          </div>
          <div class="btn">
            <el-button type="primary" size="mini" @click="setModel"
              >新增文章分类</el-button
            >
          </div>
          <div class="theArticleForm">
            <el-ArticleForm :list="dataList"></el-ArticleForm>
          </div></div
      ></el-col>
    </el-row>
    <!--新增分类模态  -->
    <el-Articles></el-Articles>
  </div>
</template>

<script>
//引入文章组件
const ArticleForm = () => import("@/components/classifManager/ArticleForm.vue");
//模态框组件
const Articles = () => import("@/components/classifManager/createArticles.vue");
//引入api
import { getTitleList } from "@/network/api/classifManager/index";
export default {
  name: "classifManage",
  data() {
    return {
      formInline: {
        user: "",
        region: "",
      },
      dataList: [],
    };
  },
  components: {
    "el-ArticleForm": ArticleForm,
    "el-Articles": Articles,
  },
  created() {
    let { user, region } = this.formInline;

    region = "-1";
    this.getTitle("", 0, region, 3);
    //监听是否删除成功
    this.$mitt.on("deled", (arg) => {
      if (arg == 200) {
        this.getTitle(user, 0, region, 3);
      }
    });
  },
  watch: {
    "formInline.region": {
      handler(val) {
        this.formInline.region = val;
        this.getTitle("", 0, val, 3);
      },
      deep: true,
    },
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    async getTitle(name1, pid, status1, type) {
      let res = await getTitleList(name1, pid, status1, type);
      this.dataList = res.data.data.list;
    },
    //搜索
    getSeacrh() {
      console.log(this.formInline.user);
      let { user, region } = this.formInline;
      this.getTitle(user, 0, region, 3);
    },
    //设置模态框
    setModel() {
      this.$mitt.emit("setModel1", true);
    },
  },
};
</script>

<style scoped lang="scss">
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #fff;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  padding: 20px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>